import React from 'react'

import { Form, Input, Select, Button, Row, Col, Badge, Cascader } from 'antd'
const FormItem = Form.Item
const { Option } = Select
const TopForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch, onClick4, advanced, options, resetForm, warehouse }) => {
    const advancedss = () => {
        if (onClick4) {
            onClick4()
        }
    }
    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        },
    };
    return (
        <div>
            <Form>
                <Row gutter={24}>
                    <Col span={5}>
                        <FormItem label='批号'{...formItemLayout}>
                            {
                                getFieldDecorator('batchNo', {
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='领料单号'{...formItemLayout}>
                            {
                                getFieldDecorator('acceptCode', {
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请输入领料单号' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='发料状态'{...formItemLayout}>
                            {
                                getFieldDecorator('outStatus', {
                                    // initialValue: '1'
                                })(
                                    <Select allowClear={true} placeholder='请选择发料状态'>
                                        <Option value='1'>待确认</Option>
                                        <Option value='2'>未完成</Option>
                                        <Option value='3'>已完成</Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='备料仓库'{...formItemLayout}>
                            {
                                getFieldDecorator('storeName', {
                                    initialValue: localStorage.getItem('department')
                                })(
                                    <Select allowClear={true} placeholder='请选择备料仓库'>
                                        {
                                            warehouse.map((value, index) => {
                                                return <Option value={value.name} key={value.id}>{value.name}</Option>
                                            })
                                        }
                                    </Select>
                                )
                            }
                        </FormItem>

                    </Col>
                    <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
                        <FormItem>
                            <Button type="primary" icon="search" onClick={() => onSearch(getFieldsValue())}>
                                {'查询'}
                            </Button>
                        </FormItem>
                        <FormItem>
                            <Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => advancedss()}>
                                {' 展开'}
                            </Button>
                        </FormItem>
                        <FormItem>
                            <Button type="default" onClick={() => {
                                resetForm()
                            }}
                                icon={'redo'}
                            >
                                {'重置'}
                            </Button>
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={24}>
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='装配部门'{...formItemLayout}>
                                {
                                    getFieldDecorator('departmentId')(
                                        <Cascader options={options} placeholder='请选择装配部门' />
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='物料编码'{...formItemLayout}>
                                {
                                    getFieldDecorator('partCode', {
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/\s+/g, "")
                                        },
                                    })(
                                        <Input placeholder='请输入物料编码' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='图号'{...formItemLayout}>
                                {
                                    getFieldDecorator('paperCode', {
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/\s+/g, "")
                                        },
                                    })(
                                        <Input placeholder='请输入图号' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='物料名称'{...formItemLayout}>
                                {
                                    getFieldDecorator('partName', {
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/\s+/g, "")
                                        },
                                    })(
                                        <Input placeholder='请输入物料名称' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                </Row>
                <Row gutter={24}>
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='物料变更'{...formItemLayout}>
                                {
                                    getFieldDecorator('partChangeAttitude')(
                                        <Select allowClear={true} placeholder='请选择物料变更'>
                                            <Option value='1'>物料新增</Option>
                                            <Option value='2'>物料取消</Option>
                                            <Option value='3'>物料属性变化</Option>
                                            <Option value='4'>回仓</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {/* {
                        advanced ? <Col span={5}>
                            <FormItem label='成品状态'{...formItemLayout}>
                                {
                                    getFieldDecorator('accomplishState', {
                                        initialValue: '未入库'
                                    })(
                                        <Select allowClear={true}>
                                            <Option value='全部'>全部</Option>
                                            <Option value='未入库'>未入库</Option>
                                            <Option value='已入库'>已入库</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    } */}
                </Row>
            </Form>
        </div>
    )
}
export default Form.create()(TopForm)
